<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
        <title>爱音乐春季运动会</title>
        <link rel="stylesheet" href="./lib/jquery/jquery.mobile-1.4.5.min.css">
        <style>
            input:focus{
            -moz-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            -webkit-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
            }
            ::-webkit-input-placeholder { /* WebKit browsers */
                color: #8C7169;
            }
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #8C7169;
            }
            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #8C7169;
            }
            :-ms-input-placeholder { /* Internet Explorer 10+ */
                color: #8C7169;
            }
            .checkbox{
                position: relative;
                width: 20px;height: 20px;;
            }
        </style>
        <script src="./lib/jquery/jquery-1.9.1.min.js"></script>
        <script src="./lib/jquery/jquery.mobile-1.4.5.min.js"></script>
        <script src="tool/share.js"></script>
        <script src="tool/config.js"></script>
        <script type="text/javascript">
            function check1(){
                $("#check").toggle();
            }
            //return true if checked or false
            function getCheckStatus(){
                return !($("#check")[0].style.display=="none");
            }
        </script>
    </head>
<body>

<img src="image/pointerup.png" style="position: fixed;left:91%;z-index: 999;width: 8%;display: none" id="pointerup">
<div data-role="page" style="background-image: url(image/luckypage.png);background-repeat: no-repeat;background-size:cover;">
    
     <div data-role="main" class="ui-content" style="background-color: #ece7d0;border:thick solid #e5b564;border-radius: 34px;position: absolute;top: 50%;left: 50%;right:2%;overflow: hidden;width:256px;height:421px;margin-top: -225px;margin-left: -148px;">
        <a href="#" style="padding: 0;position: relative;top:-10px;float: right;right: -2px;z-index: 999;" onclick="window.location.href='ringtone.html';"><img src="./image/close.png" style="width: 30px;"></a>
        <div style="text-align: left;background-color: #c9cf75;border-radius: 34px;padding: 3px;line-height: 8px;font-family: verdana;position: relative;">
            <div style="left: 25%;position: relative;">
                <p><span style="font-weight: bold;">歌名：</span><span style="color: #fff;" id="songname">最炫名族风</span></p>
                <p><span style="font-weight: bold;">歌手：</span><span style="color: #fff;" id="name">凤凰传奇</span></p>
                <p><span style="font-weight: bold;">资费：</span><span style="color: red;">0</span><span style="color: #fff;">元</span></p>            
            </div>
        </div>
        <form style="width: 240px;margin:15px auto;">
            <input data-role="none" class="ui-body-d ui-corner-all ui-shadow-inset" type="text" name="phone" id="phone" placeholder="请输入天翼手机号码" style="background-image: none; min-height: 30px;  font-size: 16px; outline: 0; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; margin:.4em 0;width:90%;padding:4px 4px;line-height:26px; border: 1px solid #ddd;;color: #333;background-color: #af877a;"/>   
            <input data-role="none" class="ui-body-d ui-corner-all ui-shadow-inset" name="verifycode" id="verifycode" value="" type="text" style="background-image: none; min-height: 30px;  font-size: 16px; outline: 0; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; margin:.4em 0;width:55%;padding:4px 4px;line-height:26px; border: 1px solid #ddd;;color: #333;background-color: #af877a;" placeholder="请输入验证码" />
            <a style="width:36%;float:right;margin-top: 4px;" data-mini="true" data-ajax="false" href="#" id="sendVerifyCode">
                <img src="image/verifybtn.png" style="width: 76px;height: 45px;">
            </a>
            <div style="margin-top: 5px;text-align: center;">
                <div class="checkbox">
                    <img src="image/checkbox.png" style="position: absolute;left:0;top: 11px;">
                    <img src="image/check.png" style="position: absolute;left: 4px;top: 9px;" id="check">
                    <span style="display: inline-block;position: absolute;left:0;top:11px;width: 20px;height: 20px;" onclick="check1();"></span>
                </div>
                <label for="red" data-role="none" style="display: inline;">同意《会员服务条款》</label>                
            </div>
            <p>
                若你为开通彩铃功能，系统将同步为你开通，费用按当省份实际收取（参考5元/月）
            </p>
            <div style="margin-top: 10px;text-align: center;">
                <a style="width:30%;margin:0 auto;" data-mini="true" data-ajax="false" href="#" id="commitbtn"><img src="image/commitbuy.png" style="width: 130px;height: 50px;"></a>
            </div>
        </form>
     </div>
     <div data-role="popup" id="popupView2" class="ui-content" data-overlay-theme="b" data-history="false" data-position-to="window" data-dismissible="false"  data-corners="false" data-tolerance="30,15" style="background-image: url(image/cl2.png);background-size: 100% 100%;padding-bottom: 131px;padding-left: 60px;padding-right: 68px;border-radius: 33px;background-repeat: no-repeat;">
        <div style="text-align: center;position: relative;bottom: -86px;">
            <a href="#" style="float: left;" onclick="hidePopupView();"><img src="image/clback.png" style="width: 66px;height: 33px;float: left;"></a>&nbsp
            <a href="#" id="commitgetbtn"><img src="image/clget.png" style="width: 66px;height: 33px;"></a>             
        </div>
     </div>
     <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-history="false" data-position-to="window" data-dismissible="false"  data-corners="false" data-tolerance="30,15" style="background-image: url(image/getringtone.png);background-size: 100% 100%;padding-bottom: 243px;padding-left: 91px;padding-right: 93px;border-radius: 33px;position: relative;left: 2%;">
        <div style="text-align: center;position: relative;bottom: -190px;">
            <a href="#" style="float: left;" onclick="window.location.href='lucky.html';"><img src="image/luckyone.png" style="width: 66px;height: 33px;float: left;">             
        </div>
     </div>
     <div data-role="popup" id="popupView3" class="ui-content" data-overlay-theme="b" data-history="false" data-position-to="window" data-dismissible="false"  data-corners="false" data-tolerance="30,15" style="background-image: url(image/getringtone2.png);background-size: 100% 100%;padding-bottom: 243px;padding-left: 91px;padding-right: 93px;border-radius: 33px;position: relative;left: 2%;">
        <div style="text-align: center;position: relative;bottom: -190px;">
            <a href="#" style="float: left;" onclick="window.location.href='lucky.html';"><img src="image/luckyone.png" style="width: 66px;height: 33px;float: left;">             
        </div>
     </div>
</div>
<script type="text/javascript">
    //显示加载器  
    function showLoader() {  
        //显示加载器.for jQuery Mobile 1.2.0  
        $.mobile.loading('show', {  
            text: '加载中...', //加载器中显示的文字  
            textVisible: true, //是否显示文字  
            theme: 'a',        //加载器主题样式a-e  
            textonly: false,   //是否只显示文字  
            html: ""           //要显示的html内容，如图片等  
        });  
    }  
       
    //隐藏加载器.for jQuery Mobile 1.2.0  
    function hideLoader() {  
        //隐藏加载器  
        $.mobile.loading('hide');  
    }

    function hidePopupView(){
        $("#popupView2").popup('close');
    }

    function getUrlParam(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r!=null) return unescape(r[2]); return null; //返回参数值
    } 

    $(document).ready(function(){
        var crbtId = $.trim(getUrlParam('crbtId'));
        if(crbtId == '810028436322'){
            $("#name").text('李明蔚');
            $("#songname").text('相见恨晚');
        }else if(crbtId == '810028436303'){
            $("#name").text('闫旭');
            $("#songname").text('放手去爱吧');
        }else if(crbtId == '810028436318'){
            $("#name").text('阿姣');
            $("#songname").text('远方');
        }else if(crbtId == '810028436320'){
            $("#name").text('蒲晗');
            $("#songname").text('白天不懂夜的黑');
        }else if(crbtId == '810028436316'){
            $("#name").text('刘宣彤+赵亮');
            $("#songname").text('全世界宣布爱你');
        }

        $("#sendVerifyCode").click(function(){
            var phone = $.trim($("#phone").val());
            // var myreg = /^1[3458]\d{9}$/;
            var myreg = /^(133|153|180|189|181|170|171|173|177|149)\d{8}$/;
            if (!myreg.exec(phone)){
                alert('请输入正确的天翼手机号码');
                return false;
            }else{
                $.post(API_ROOT+"sendRandomCode?debug="+API_DEBUG,{'phone':phone},function(result){
                    if(result.success){
                        alert("发送成功");
                    }else{
                        alert(result.msg);
                    }
                });
            }
        });

        $("#commitbtn").click(function(){
            var phone = $.trim($("#phone").val());
            var verifycode = $.trim($("#verifycode").val());
            var myreg = /^(133|153|180|189|181|170|171|173|177|149)\d{8}$/;
            if(phone.length > 0){
                if(!myreg.exec(phone)){
                    alert('请输入正确的天翼手机号码');
                    return false;
                }              
            }else{
                alert("请输入天翼手机号码");
                return false;
            }

            if(verifycode.length <= 0){
                alert("请输入验证码");
                return false;
            }

            if(!getCheckStatus()) {
                alert("请勾选同意条款");
                return false;
            }
            $("#popupView2").popup();
            $("#popupView2").popup('open');
        });

        $("#commitgetbtn").click(function(){
            var phone = $.trim($("#phone").val());
            $.ajax({
                'url': API_ROOT+"freeRingtone?debug="+API_DEBUG,
                'type': 'POST',
                'dataType': 'JSON',
                'data': {"phone":phone,"crbtId":crbtId},
                'success': function(result){
                    if(result.success){
                        $("#popupView2").popup('close');
                        setTimeout(function(){
                            if(result.type == 1){
                                $("#popupView").popup();
                                $("#popupView").popup('open');
                            }else{
                                $("#popupView3").popup();
                                $("#popupView3").popup('open');
                            }
                        },500);
                    }else{
                        alert(result.msg);
                    }
                }
            });
        });


    });

     
</script>
</body>
</html>
